<script setup lang="ts">
const formInputMap = ref({
    name: '',
    num: '',
    time:''
})
const footerBtns=()=>{

}
</script>

<template>
    <div class="container">
        <div class="header">
            <NavBar title="添加支付方式" :showRightIcon="false" />
        </div>
        <div class="content">
            <div class="addApay-container">
                <div class="addApay-card">
                    <div class="addApay-card-top flex middle between">
                        <div class="addApay-card-top-title">储存卡</div>
                        <div class="addApay-card-top-title flex middle">
                            <img src="@/assets/images/icon/my-account/pay-one.png" alt="">
                            <img src="@/assets/images/icon/my-account/pay-two.png" alt="">
                            <img src="@/assets/images/icon/my-account/pay-three.png" alt="">
                            <img src="@/assets/images/icon/my-account/pay-four.png" alt="">
                        </div>
                    </div>
                    <div class="addApay-card-num flex middle">
                        <div class="addApay-card-num-box flex middle">
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                        </div>
                        <div class="addApay-card-num-box flex middle">
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                        </div>
                        <div class="addApay-card-num-box flex middle">
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                            <div class="addApay-card-num-doc"></div>
                        </div>
                    </div>
                    <div class="addApay-card-time flex middle">
                        <div class="addApay-card-time-left addApay-card-time-left-mr">
                            <div class="addApay-card-time-left-title">Card Holdr Name</div>
                            <div class="addApay-card-time-left-name">Full Name</div>
                        </div>
                        <div class="addApay-card-time-left">
                            <div class="addApay-card-time-left-title">有效期</div>
                            <div class="addApay-card-time-left-name">06/28</div>
                        </div>
                    </div>
                </div>
                <div class="addApay-card-form form-mt">
                    <FormInput v-model="formInputMap.name" title="账户持有者姓名" />
                    <FormInput v-model="formInputMap.num" title="卡号" />
                    <div class="flex middle between">
                        <FormInput class="form-mr" :showRightIcon="true" v-model="formInputMap.time" title="有效期" titleRight="日期筛选" />
                        <FormInput v-model="formInputMap.num" title="开户行" />
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <FooterBtn @footerBtn="footerBtns" title="保存" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.addApay-container {
    padding: 8px 10px;

    .addApay-card {
        height: 97px;
        background-image: url('@/assets/images/icon/my-account/add-card.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        &-top {
            padding: 12px 10px 20px;

            &-title {
                font-size: 7px;
                font-weight: 500;

                & img {
                    height: 7px;
                    margin-right: 3px;
                }
            }

        }

        &-num {
            padding: 0px 10px 20px;

            &-doc {
                width: 7.5px;
                height: 7.5px;
                background-color: #000;
                border-radius: 50%;
                margin-right: 3px;
            }

            &-box {
                margin-right: 6px;
            }
        }

        &-time {
            padding: 0px 10px 0px;

            &-left {
                &-title {
                    font-size: 5px;
                    font-weight: 400;

                }

                &-name {
                    margin-top: 6px;
                    font-size: 7px;
                    font-weight: 500;

                }

                &-mr {
                    margin-right: 30px;
                }
            }

        }

        &-form {

            &-name {}
        }
    }
}
</style>
